<style lang="scss" scoped="">
	.chatter {
		display: flex;
		flex-direction: column;
		height: 70vh;
		background-color: white;
	}

	.conv_content {
		height: 40px;
		flex: 100;
		overflow-y: auto;

	}

	.conv {
		display: flex;
		position: relative;
	}

	.input {
		border-top: 1px solid gainsboro;
		height: 170px;
		width: 100%;
		position: relative;
		padding: 20px;

		textarea {
			overflow-y: auto;
			resize: none;
			width: 100%;
			font-size: 13px;
			padding: 5px;
			border: 1px solid gainsboro;
		}

		;

		textarea:focus {
			box-shadow: 2px 2px 3px rgba(167, 255, 235, 0.4),
				-2px -2px 3px rgba(167, 255, 235, 0.4);

		}

		;

		button {
			margin-top: 12px;
			font-size: 14px;
			width: 80px;
			float: right;
			height: 30px;
			background-color: #4EA0FE;
			color: white;
			border: none;
		}
	}

	.recommend {
		position: absolute;
		width: calc(100% - 40px);

		background-color: white;
		bottom: 150px;
		border: solid 1px gainsboro;
		z-index: 2000;

		&.noact {
			border: none;
		}

		;

		div {
			// height: 30px;
			line-height: 30px;
			padding-left: 10px;
			// width: 100%;
			font-size: 13px;

		}

		;

		div:hover {
			color: white;
			background-color: cornflowerblue;
			cursor: pointer;
		}
	}
</style>
<template>
	<div class="chatter">
		<div class="conv_content" id="conv_content">
			<template v-for="(item,index) in conv_list">
				<conv :obj="item.obj" :content="item.content" :type="item.type" @goGuess="goGuess" :key="index"> </conv>
			</template>

		</div>
		<div class="input">
			<div class="recommend" :class="{noact:guess_match_list.length==0}">
				<template v-for="(item,index)  in guess_match_list">
					<div v-if="index<5" @click="goGuess(item);guess_match_list=[];input=''" :key="index">{{(index+1) + '.' +item.content}}</div>
				</template>

			</div>
			<textarea id="input" rows="3" v-model="input" placeholder="请详细描述您的问题进行提问, 按下shift+enter进行换行哦！"></textarea>
			<button @click="send()">发 送</button>
		</div>

	</div>

</template>

<script>
	// import {io} from "../plugins/socket.io"
	import ajax from "../ajax_util"
	import conv from "./conv"
	import Axios from 'axios'
	var xss = require('xss');
	var socket = "";


	export default {
		name: 'chatter',
		components: {
			conv
		},
		data() {
			return {
				input: "",
				conv_list: [{
						obj: "other",
						content: "Hi，很高兴跟你做朋友，以后请多多指教！ 请一句话描述您的问题，我们来帮您解决问题。（例如：集中化大数据PaaS平台是什么？）"
					}

				],
				guess_match_list: [

				]
			}
		},

		methods: {
			send() {
				let send_content = xss.filterXSS(this.input.trim());
				if (send_content.length < 1) {
					return
				}

				var that = this
				var url = this.CONFIG.chatter_socket_url + '/chatter_response'
				var data = {
					obj: 'me',
					content: send_content
				}
				// ajax.post({
				// 	url: url,
				// 	that: that,
				// 	data: data,
				// 	success: function(data) {
				// 		console.log('chatter_response')
				// 		that.getResponse(data)
				// 	},
				// })

				Axios.post(url, data)
					.then(function(response) {
						console.log('chatter_response')
						that.getResponse(response.data)
					})
					.catch(function(error) {
						that.conv_list.push({
							obj: 'other',
							//type:data.type,
							content: "梧桐君断线了，请耐心等待"
						});
						that.$Notice.error({
							title: '网络异常',
							desc: "梧桐君断线了",
							duration: 5,
						});
					});

				this.conv_list.push({
					obj: 'me',
					content: send_content
				});
				this.input = "";
			},

			getResponse(data) {
				// var content=data.content
				// if(data.type=="guess"){
				//   content=eval(content)
				// }
				// if(data.type=="appendix"){
				//   content=eval(content)
				// }
				// this.conv_list.push({
				//   obj:'other',
				//   type:data.type,
				//   content:content
				// });
				console.log('getResponse', data)
				if ("answer" in data) {
					this.conv_list.push({
						obj: 'other',
						type: "answer",
						content: data['answer']
					});
				}

				if ("guess" in data && data['guess'].length > 0) {
					this.conv_list.push({
						obj: 'other',
						type: "guess",
						content: eval(data['guess'])
					});
				}

				if ("appendix" in data) {
					this.conv_list.push({
						obj: 'other',
						type: "appendix",
						content: data['appendix']
					});
				}



			},

			goGuess({
				content,
				k_id
			}) {
				console.log({
					content,
					k_id
				})

				this.conv_list.push({
					obj: 'me',
					content: content
				});

				var data = {
					node_id: k_id,
					content: content
				}
				var that = this
				var url = this.CONFIG.chatter_socket_url + '/chatter_get_guess'
				// ajax.post({
				// 	url: url,
				// 	that: that,
				// 	data: data,
				// 	success: function(data) {
				// 		that.conv_list.push({
				// 			obj: 'other',
				// 			//type:data.type,
				// 			content: data.content
				// 		});
				// 	}
				// })

				Axios.post(url, data)
					.then(function(response) {
						that.conv_list.push({
							obj: 'other',
							//type:data.type,
							content: response.data.content
						});
					})
					.catch(function(error) {
						that.conv_list.push({
							obj: 'other',
							//type:data.type,
							content: "梧桐君断线了，请耐心等待"
						});
						that.$Notice.error({
							title: '网络异常',
							desc: "梧桐君断线了",
							duration: 5,
						});
					});
				
			},


		},
		watch: {
			conv_list: function(new_v, old_v) {
				console.log('conv_list')
				console.log(new_v)
				var ele = document.getElementById('conv_content');
				console.log('ele', ele)
				this.$nextTick(() => {
					ele.scrollTop = ele.scrollHeight;
				});
				//        setTimeout(function(){
				//          ele.scrollTop = ele.scrollHeight;
				//        },500);

			},
			input: function(new_v, old_v) {
				this.utils.delay(() => {
					if (new_v.length % 2 == 0 && new_v.length != 0) {
						console.log("chatter_match_guess emit")
						console.log(new_v)
						//socket.emit('chatter_match_guess',{'content':new_v});
						var data = {
							obj: 'me',
							content: new_v
						}
						console.log(data)
						var that = this
						var url = this.CONFIG.chatter_socket_url + '/chatter_match_guess'
						// ajax.post({
						// 	url: url,
						// 	that: that,
						// 	data: data,
						// 	success: function(data) {
						// 		console.log('chatter_match_guess')
						// 		that.guess_match_list = eval(data["content"])
						// 	}
						// })

						Axios.post(url, data)
							.then(function(response) {
								that.guess_match_list = eval(response.data["content"])
							})
							.catch(function(error) {
								that.conv_list.push({
									obj: 'other',
									//type:data.type,
									content: "梧桐君断线了，请耐心等待"
								});
								that.$Notice.error({
									title: '网络异常',
									desc: "梧桐君断线了",
									duration: 5,
								});
							});

					} else if (new_v.length == 0) {
						this.guess_match_list = []
					}
				}, 500)
			},
		},
		mounted() {
			var that = this;
			document.getElementById('input').addEventListener('keydown', function(e) {

				if (e.keyCode != 13 && e.shiftKey) {

					return
				} else if (e.keyCode == 13 && !e.shiftKey) {
					e.preventDefault();
					that.send()
					return
				}


			});

			/////////////////////////////////
			console.log('this.CONFIG.chatter_socket_url', this.CONFIG.chatter_socket_url)

			// socket = io(this.CONFIG.chatter_socket_url);

			// socket.on('reconnect_attempt', (attempt ) => {
			//   if(attempt >3){//重连次数超过三，则断开连接
			//     socket.close()
			//   }
			// });
			// var that = this
			var url = this.CONFIG.chatter_socket_url + '/connect'
			// ajax.get({
			//   url:url,
			//   that:that,
			//   success:function(data){
			//     console.log('connect')
			//     console.log(data)
			//     that.conv_list.push({
			//       obj:'other',
			//       type:data.type,
			//       content:data.content
			//     });
			//   },

			// })

			Axios.get(url)
				.then(function(data) {
					console.log('connect')
					console.log(data.data)
					that.conv_list.push({
						obj: 'other',
						//type:data.type,
						content: data.data.content
					});
				})
				.catch(function(error) {
					that.conv_list.push({
						obj: 'other',
						//type:data.type,
						content: "梧桐君断线了，请耐心等待"
					});
					that.$Notice.error({
						title: '网络异常',
						desc: "梧桐君断线了",
						duration: 5,
					});
				});
			// socket.on('connect', (data) => {
			// });

			// socket.on('chatter_response',(data) =>{
			//   that.getResponse(data)
			// });

			// socket.on('chatter_match_guess',(data) =>{
			//   this.guess_match_list=eval(data["content"])
			// });

		},

		// beforeDestroy(){
		//   socket.close()
		// }

	}
</script>
